.team-photo{

    // ============================================================================
    //   Variables
    // ============================================================================

    // properties IN
    $pt-tooltips-height-duration-in:                1ms;
    $pt-tooltips-height-delay-in:                   1ms;
    $pt-tooltips-height-easing-in:                  linear;

    $pt-tooltips-transform-duration-in:             250ms;
    $pt-tooltips-transform-delay-in:                250ms;
    $pt-tooltips-transform-easing-in:               $bezier-medium-elastic;

    $pt-tooltips-opacity-duration-in:               $pt-tooltips-transform-duration-in;
    $pt-tooltips-opacity-delay-in:                  $pt-tooltips-transform-delay-in;
    $pt-tooltips-opacity-easing-in:                 $pt-tooltips-transform-easing-in;

    // properties OUT
    $pt-tooltips-transform-duration-out:            250ms;
    $pt-tooltips-transform-delay-out:               100ms;
    $pt-tooltips-transform-easing-out:              $bezier-medium-elastic;

    $pt-tooltips-opacity-duration-out:              $pt-tooltips-transform-duration-out;
    $pt-tooltips-opacity-delay-out:                 $pt-tooltips-transform-delay-out;
    $pt-tooltips-opacity-easing-out:                $pt-tooltips-transform-easing-out;

    $pt-tooltips-height-duration-out:               1ms;
    $pt-tooltips-height-delay-out:                  ( $pt-tooltips-opacity-duration-out + $pt-tooltips-opacity-delay-out );
    $pt-tooltips-height-easing-out:                 linear;

    // ============================================================================
    //   Group
    // ============================================================================
    
    &s{
        text-align: center;
    }

    // ============================================================================
    //   Single & Scoped
    // ============================================================================
    
    position: relative;
    display:inline-block;
    width: 68px;
    height: 68px;
    margin: 0.5em 0.45em;
    border-radius: 50%;
    // overflow: hidden;

    &:after{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(#0AF6EF,0) 25%, rgba($color-parse-blue,0.36) 100%);
        border-radius: 50%;
        transition: opacity 250ms ease;
    }

    &__image{
        position:absolute;
        left:0; top:0;
        width: 100%; height: 100%;
        background-position: center center;
        background-size: cover;
        border-radius: 50%;

        filter: grayscale(100%);
        transition: filter 250ms ease;
    }

    &__tooltip{
      z-index: 5;
      position:absolute;
      top: 100%;
      left: 50%;

      display: inline-block;
      height: 0;
      overflow: hidden;
      color:white;
      font-size: 1.2rem;
      padding: 0 11px;
      line-height: 34px;
      // margin-top: -10px;

      backface-visibility: hidden;

      //animated properties
      opacity: 0;
      transform: translate(-50%, 10px);
      transition: transform $pt-tooltips-transform-duration-out $pt-tooltips-transform-easing-out $pt-tooltips-transform-delay-out,
                  opacity $pt-tooltips-opacity-duration-out $pt-tooltips-opacity-easing-out $pt-tooltips-opacity-delay-out,
                  height $pt-tooltips-height-duration-out $pt-tooltips-height-easing-out $pt-tooltips-height-delay-out;

      &:before{
        content:"";
        position: absolute;
        border-radius: 4px;
        top:14px; bottom:0;
        left:0; right:0;
        background-color: $color-vista-white;
      }

      &:after{
          position: absolute;
          top:0; left:50%;
          margin-left: -7px;
          @include triangle(top, $color-vista-white, 14px);
      }

      span{
        position: relative;
        display: block;
        padding-top: 14px;
        white-space: nowrap;
        color: $color-comet;
      }
    }


    // ============================================================================
    //   States
    // ============================================================================
    
    html.no-touch &:hover{
        &:after{ opacity:0; }
        .team-photo__image{ filter: grayscale(0); }
        .team-photo__tooltip{
          height: 48px;
          overflow: visible;
          opacity: 1;
          transform: translate(-50%, 0);
          transition: transform $pt-tooltips-transform-duration-in $pt-tooltips-transform-easing-in $pt-tooltips-transform-delay-in,
                  opacity $pt-tooltips-opacity-duration-in $pt-tooltips-opacity-easing-in $pt-tooltips-opacity-delay-in,
                  height $pt-tooltips-height-duration-in $pt-tooltips-height-easing-in $pt-tooltips-height-delay-in;
        }
    }

    html.no-touch &{
        &:hover{
            .product-teaser__icon{
                background-color: rgba($color-parse-blue, 0.8);
                img{
                    transform: translateY(-50%) scale(1.2);
                }
            }
        }
    }

    // ============================================================================
    //   Media Queries
    // ============================================================================

    @include break-min($break-iphone6-landscape){
        width: 80px;
        height: 80px;
        margin: 0.7em 0.62em;
    }

    @include break-min($break-iphone6-plus-landscape){
        width: 86px;
        height: 86px;
    }

    @include break-min($break-tablet){
        width: 94px;
        height: 94px;
        margin: 0.8em 0.7em;
    }

    @include break-min($break-desktop){
        &s { padding-bottom: 40px; } // for tooltips
    }


    // ============================================================================
    //   Modifiers
    // ============================================================================
    
    // &--blue{}

}